<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">

        &#xe624;
      </span>
    </div>
    <div class="header-search">
      <span class="iconfont">
        &#xe632;
      </span>
      输入城市/景点/游玩主题
    </div>
    <div class="header-right">
      北京<span class="iconfont">&#xe6aa;</span>
    </div>
  </div>
</template>


<script>
export default {

}
</script>
<style scoped lang='stylus'>
@import '~css/var.styl';

.header{
  width: 100%;
  line-height: .88rem;
  background: $bgColor;
  color: $textColor;
  font-size: .36rem;
  display: flex;
  align-content: center;
}
.header-left {
  width: .4rem;
  padding:0 .2rem;
  text-align: center;
  font-weight: bold;
}
.header-search{
  flex: 1;
  background: #fff;
  margin: auto 0;
  height: .6rem;
  border-radius: .1rem;
  color: #c1c1c1;
  line-height: .6rem;
  padding-left: .2rem;
  font-size: 14px;
}
.header-right{
  font-size: 14px;
  padding:0 .1rem ;
}
</style>
